<template>
    <view class="content">
        <HM-dragSorts
            ref="dragSorts"
            :list="list"
            :autoScroll="true"
            :feedbackGenerator="true"
            :listHeight="300"
            :rowHeight="55"
            @change="change"
            @confirm="confirm"
            @onclick="onclick"
        ></HM-dragSorts>
    </view>
</template>
<script>
import { goodsCategory, goodsWeigh } from '@/api/index.js';
import { utils } from '@/utils/utils.js';
import dragSorts from '@/uni_modules/HM-dragSorts/components/HM-dragSorts/HM-dragSorts.vue'; // 组件符合easycom规范，默认这个可以不写
export default {
    components: { 'HM-dragSorts': dragSorts }, // 组件符合easycom规范，默认这个可以不写
    data() {
        return {
            list: []
        };
    },
    onLoad() {
        this.getList();
    },
    methods: {
        async getList() {
            const ret = await goodsCategory();
            if (ret.code == 1) {
                this.list = ret.data.map((it) => {
                    return {
                        name: it.name,
                        id: it.id
                    };
                });
                console.log(this.list);
            } else {
                utils(ret.msg);
            }
        },

        push() {
            // 和数组的push使用方法一致，可以push单行，也可以push多行
            this.$refs.dragSorts.push({
                name: 'push行'
            });
        },
        unshift() {
            // 和数组的unshift使用方法一致，可以unshift单行，也可以unshift多行
            this.$refs.dragSorts.unshift({
                name: 'unshift行'
            });
        },
        splice() {
            // 和数组的unshift使用方法一致 下标1开始删除1个并在下标1位置插入行
            this.$refs.dragSorts.splice(1, 1, {
                name: 'splice行'
            });
        },
        onclick(e) {
            console.log('=== onclick start ===');
            console.log('被点击行: ' + JSON.stringify(e.value));
            console.log('被点击下标: ' + JSON.stringify(e.index));
            console.log('=== onclick end ===');
        },
        change(e) {
            console.log('=== change start ===');
            console.log('被拖动行: ' + JSON.stringify(e.moveRow));
            console.log('原始下标：', e.index);
            console.log('移动到：', e.moveTo);
            console.log('=== change end ===');
        },
        async confirm(e) {
            console.log('=== confirm start ===');
            console.log('被拖动行: ' + JSON.stringify(e.moveRow));
            console.log('原始下标：', e.index);
            console.log('移动到：', e.moveTo);
            console.log('=== confirm end ===');
            console.log(e);
            let ids;
            ids = e.list.map((it) => it.id).join(',');
            const ret = await goodsWeigh(ids, JSON.stringify(e.moveRow.id));
            utils('更新成功');
            console.log(111, ret);
            console.log(ids);
            console.log('被拖动行: ' + JSON.stringify(e.moveRow.id));
        }
    }
};
</script>
<style lang="scss" scoped>
//scoped css只在当前页生效 不影响子组件
page {
    background-color: #efeff4;
}
</style>
